<template>
  <div>

    <div class="mdui-tab mdui-tab-full-width mdui-color-pink tjtab" mdui-tab ref="tab">
      <a href="#tab-Liux" ref="tab1" class="mdui-ripple mdui-tab-active">流行</a>
      <a href="#tab-Xinkuan" ref="tab2" class="mdui-ripple">新款</a>
      <a href="#tab-Jxuan" ref="tab3" class="mdui-ripple">精选</a>
    </div>

    <div id="tab-Liux" class="mdui-p-a-2">
      <slot name="tab-Liux"></slot>
    </div>

    <div id="tab-Xinkuan" class="mdui-p-a-2">
      <slot name="tab-Xinkuan"></slot>
    </div>

    <div id="tab-Jxuan" class="mdui-p-a-2">
      <slot name="tab-Jxuan"></slot>
    </div>

  </div>

</template>

<style>
  .tjtab {
    z-index: 9;
  }
</style>

<script>
  import NavBar from 'components/navbar/NavBar'

  export default {
    name: '',
    //传参：父传子，写法：["形参1"[,"形参2"]]
    props: {

    },
    data() {
      return {
        inst: null,
      }
    },
    created() {

    },
    mounted() {
      const inst = new mdui.Tab('#tab');

      this.$refs.tab.addEventListener('change.mdui.tab', (event) => {
        if (event._detail.index == 0) {
          this.currentType = 'pop'
        } else if (event._detail.index == 1) {
          this.currentType = 'new'
        } else if (event._detail.index == 2) {
          this.currentType = 'sell'
        }
        this.$emit('ChangecurrentType', this.currentType)
      })
      this.$refs.tab1.addEventListener('click', () => {
        this.currentType = 'pop'
        this.$emit('ChangecurrentType', this.currentType)
      });
      this.$refs.tab2.addEventListener('click', () => {
        this.currentType = 'new'
        this.$emit('ChangecurrentType', this.currentType)
      });
      this.$refs.tab3.addEventListener('click', () => {
        this.currentType = 'sell'
        this.$emit('ChangecurrentType', this.currentType)
      });
    },
    data() {
      return {
        currentType: 'pop',
      }
    },
    methods: {
      btnChange() {
        console.log(this.inst);
        //this.inst.next();
      },

    },
    components: {
      NavBar,
    },
  }
</script>